<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<h1>提交表单上传文件</h1>
<!-- 文件上传表单 提交表单完成上传-->
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="myFile"><br>
  <input type="submit" value="上传">
</form>


<h1>axios上传文件</h1>
<!--  通过axios上传文件  -->
<input type="file" id="fileInput">
<img src="" id="Fileimg">
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script>

  document.getElementById("fileInput").onchange = function (){

    //创建一个form对象
    let formData = new FormData();
    //将图片资源放进去
    formData.append('myFile',this.files[0]);

    axios({
      method:'post',
      url: 'http://localhost:8080/upload',
      data: formData
    }).then(res=>{
      console.log(res.data);
      if(res.data.code==200) {
        document.getElementById("Fileimg").setAttribute("src",res.data.data);
      }
    })
  }
</script>

</body>
</html>